<template>
    <div id="temp">
        <!--轮播图部分  -->
        <div id="slider">
            <slider :imgList="imgList"></slider>
        </div>
    
        <!--商品文字介绍和购物车数据部分  -->
        <div id="shopcar">
    
            <!--商品文字介绍部分  -->
            <h4>{{goodsParams.title}}</h4>
            <hr>
    
            <!--购物车细节部分  -->
            <p id="shop_price">
                <span>市场价：
                    <s>￥{{goodsParams.market_price}}</s>
                </span>&nbsp;&nbsp;
                <span>销售价：
                    <b>￥{{goodsParams.sell_price}}</b>
                </span>
            </p>
            <p id="shop_count">
                <span id="shop_title">购买数量：</span>
                <button @click="shopCount= shopCount==1?1:shopCount-1">-</button>
                <span id="shopCount">{{shopCount}}</span>
                <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                    <div v-if="isShow" id="animateBall"></div>
                </transition>
                <button @click="shopCount++">+</button>
            </p>
            <router-link to="/shopcar/shopcar"><mt-button type="primary" size="small">立即购买</mt-button></router-link>
            <mt-button type="danger" size="small" @click="saveData">加入购物车</mt-button>
            <div id="info"></div>
        </div>
        <!-- 商品参数部分 -->
        <div id="shop_params">
            <h6>商品参数</h6>
            <hr>
            <p>商品货号：{{goodsParams.goods_no}}</p>
            <p>库存情况：{{goodsParams.stock_quantity}}</p>
            <p>上架时间：{{goodsParams.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}}</p>
        </div>
    
        <router-link v-bind="{to:'/goods/goodsdesc/'+goodsParams.id}">
            <mt-button type="primary" size="large">图文详情</mt-button>
        </router-link>
        <br>
    
        <!--商品组件链接部分  -->
        <div>
            <router-link v-bind="{to:'/goods/goodscomment/'+ goodsParams.id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
        <br>
    </div>
</template>
<script>
//导入全局域名
import common from '../../kits/common.js';

//导入提示小组件
import { Toast } from 'mint-ui';

//导入评论子组件
import comment from '../subcomponents/comment.vue'

//导入轮播图子组件
import slider from '../subcomponents/slider.vue'

//导入存储数据的js文件
import { getItem, setItem, delItem } from '../../kits/localSg.js'

export default {
    data() {
        return {
            id: 0,
            goodsInfo: {},
            imgList: [],
            shopCount: 1,
            goodsParams: {},
            isShow: false,
            y2: 0
        }
    },
    components: {
        slider
    },
    created() {
        this.id = this.$route.params.id;
        this.getImgList();
        this.getGoodsParams();
    },
    methods: {
        //定义动画的三个函数
        beforeEnter(el) {
            el.style.transform = "translate(0,0)";
        },
        enter(el, done) {
            el.offsetHeight;
            el.style.transform = "translate(60px,410px)";
            done();
        },
        afterEnter(el) {
            this.isShow = !this.isShow;
        },

        getImgList() {
            this.$http.get("http://182.254.146.100:8899/api/getthumimages/" + this.id)
                .then(function (res) {
                    if (res.body.status != 0) {
                        Toast({
                            message: res.body.message,
                            duration: 3000
                        });
                        return;
                    }
                    this.imgList = res.body.message;
                })
        },
        getGoodsParams() {
            this.$http.get("http://182.254.146.100:8899/api/goods/getinfo/" + this.id)
                .then(function (res) {
                    if (res.body.status != 0) {
                        Toast({
                            message: res.body.message,
                            duration: 3000
                        });
                        return;
                    }
                    this.goodsParams = res.body.message[0];
                })
        },
        saveData() {
            //点击之后将数据同步到购物车的徽章上面
            var shopcarCount = document.getElementById("shopcarCount");
            shopcarCount.innerText = parseInt(shopcarCount.innerText) + this.shopCount;

            //将数据保存在localStorage里面
            var shopinfo =
                { goodsId: this.id, goodsCount: this.shopCount }
            setItem(shopinfo);

            //实现动画的显示
            this.isShow = !this.isShow;
        }
    }
}
</script>
<style scoped>
#temp {
    padding: 10px;
}

#slider {
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    padding: 5px;
}


#info {
    padding: 20px 10px;
}




/*购物车细节样式  */

#shopcar {
    width: 100%;
    margin: 10px 0;
    border: 1px solid #cdcdcd;
    border-radius: 10px;
    padding: 0 10px;
}

#shopcar h4 {
    line-height: 30px;
    color: #0094ff;
}

#shopcar #shop_price {
    margin: 10px 0;
}

#shopcar #shop_price b {
    color: #e92322;
    font-size: 18px;
}


#shop_count {
    font-size: 0;
}

#animateBall {
    width: 20px;
    height: 20px;
    background-color: #e92322;
    border-radius: 50%;
    position: absolute;
    top: 430px;
    left: 150px;
    z-index: 999;
    transition: all 1s ease-in-out;
}

#shop_count #shop_title {
    font-size: 14px;
    margin-right: 30px;
}

#shopcar button {
    padding: 1px 10px;
}

#shop_count #shopCount {
    display: inline-block;
    width: 50px;
    height: 23px;
    font-size: 14px;
    border: 1px solid #bcbcbc;
    line-height: 23px;
    text-align: center;
    border-radius: 3px;
}




/*商品参数部分样式*/

#shop_params {
    border: 1px solid #cdcdcd;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
}

#shop_params p {
    padding-left: 20px;
    font: 12px/15px "Microsoft Yahei";
}
</style>


